<script setup>
import * as echarts from 'echarts'
import chinaMap from '@/assets/china.json'
import { ref, reactive, onMounted } from 'vue'

let chartRef = ref()
let lists = ref([])
onMounted(() => {
    initWebSocket()
})

function initWebSocket() {
    const ws = new WebSocket('ws://localhost:8765');
    ws.onopen = function(evt) {
        // alert('连接成功')
    }
    ws.onerror = function(evt) {
        alert('连接失败')
    }
    ws.onmessage = function(evt) {
        const data = JSON.parse(evt.data);
        lists.value = data
        initChart()
    }
}

function initChart() {
    var myChart = echarts.init(chartRef.value);
    let option = {
        color: '#f60',
        xAxis: {
            type: 'category',
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {
            type: 'value',
        },
        series: [
          {
            type: 'bar',
            data: lists.value[1]
          }
        ]
    }
    myChart.setOption(option)
}

</script>
<template>
    <div ref="chartRef" style="width: 100%;height:600px;"></div>
</template>

<style lang="less" scoped>
</style>

